<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <div class="flex">
        <div class="qheader">
          <div class="qheader-item qtitle">
            <span v-if="!value.nullable" class="required-asterisk">*</span>
            {{index + 1}}. {{value.title}}
          </div>
          <div class="qheader-item qdesc">{{value.description}}</div>
        </div>
        <div class="contorls">
          <el-button
            circle
            size="small"
            type="primary"
            icon="el-icon-arrow-up"
            @click="$emit('up')">
          </el-button>
          <el-button
            circle
            size="small"
            type="primary"
            icon="el-icon-arrow-down"
            @click="$emit('down')">
          </el-button>
          <el-button
            circle
            size="small"
            type="primary"
            icon="el-icon-document-copy"
            @click="$emit('duplicate')">
          </el-button>
          <el-button
            circle
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="$emit('delete')">
          </el-button>
        </div>
      </div>
    </div>

    <Radio :configuration="value" :data="value.choices" v-if="value.type === 'radio'" />
    <Input :configuration="value" :data="value.text" v-else-if="value.type === 'input'" />
    <Rating :configuration="value" :data="value.number" v-else-if="value.type === 'rating'" />
    <Checkbox :configuration="value" :data="value.choices" v-else-if="value.type === 'checkbox'" />
    <QLocation :configuration="value" v-else-if="value.type === 'location'" />

    <el-divider></el-divider>

    <el-collapse-transition>
      <div class="edit-area" v-show="edit_expended">
        <el-form label-position="left" label-width="3cm">
            <el-form-item label="标题">
              <el-input
                v-model="value.title"
                placeholder="题目标题">
              </el-input>
            </el-form-item>
            <el-form-item label="说明">
              <el-input
                type="textarea"
                autosize
                placeholder="题目说明"
                v-model="value.description">
              </el-input>
            </el-form-item>
            <el-form-item label="选填" v-if="type !== 'exam'">
              <el-switch v-model="value.nullable"></el-switch>
            </el-form-item>

            <el-form-item label="分数" v-if="type === 'exam' && value.score">
              <el-input-number v-model="value.score" :min="1"></el-input-number>
            </el-form-item>

            <RadioEdit
              v-model="value"
              :type="type"
              v-if="value.type === 'radio'" />
            <InputEdit
              v-model="value"
              :type="type"
              v-else-if="value.type === 'input'" />
            <RatingEdit
              v-model="value"
              :type="type"
              v-else-if="value.type === 'rating'" />
            <CheckboxEdit
              v-model="value"
              :type="type"
              v-else-if="value.type === 'checkbox'" />
          </el-form>

          <el-collapse v-model="show_interlock">
            <Interlock v-model="value" :questions="questions">
            </Interlock>
          </el-collapse>
      </div>
    </el-collapse-transition>

    <el-button
      class=""
      icon="el-icon-edit"
      @click="edit_expended = !edit_expended">
      {{edit_expended ? "收起" : "编辑"}}
    </el-button>
  </el-card>
</template>

<script>
import Radio from '../question/Radio.vue'
import Input from '../question/Input.vue'
import Rating from '../question/Rating.vue'
import Checkbox from '../question/Checkbox.vue'
import QLocation from '../question/Location.vue'
import RadioEdit from './Radio.vue'
import InputEdit from './Input.vue'
import RatingEdit from './Rating.vue'
import CheckboxEdit from './Checkbox.vue'
import Interlock from './Interlock.vue'

export default {
  props: ['value', 'index', 'type', 'questions'],
  components: {
    Radio,
    Input,
    Rating,
    Checkbox,
    QLocation,
    RadioEdit,
    InputEdit,
    RatingEdit,
    CheckboxEdit,
    Interlock
  },
  data () {
    return {
      show_interlock: [],
      edit_expended: false
    }
  },
  methods: {
  },
  computed: {
  }
}
</script>

<style scoped lang="sass">
.required-asterisk
  color: #F56C6C

.flex
  display: flex
  align-items: center
  justify-content: space-between

.qheader
  .qheader-item
    margin: .1cm

  .qtitle
    font-size: 20px

  .qdesc
    font-size: 13px

</style>

<style scoped>
.header-title {
  margin-bottom: 18px;
  line-height: 1;
}
.qheader {
  display: block;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.inputBox {
  display: flex;
  margin-bottom: 20px;
}
.option {
  display: flex;
  flex: auto;
}
.contorls {
  padding-left: 15px;
  white-space: nowrap;
}
</style>
